<template>
  <ele-modal
    :width="950"
    :visible="visible"
    :confirm-loading="loading"
    :title="'收款'"
    :body-style="{ paddingBottom: '30px' }"
    :maskClosable="false"
    @update:visible="updateVisible"
    @ok="save"
    @cancel="cancel"
  >
    <div>
      <a-form
        :label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
        :wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
      >
        <a-row :gutter="24">
          <a-col :md="12" :sm="12" :xs="12">
            <div class="pay_top">
              <div>
                <h6>实收金额(元)</h6>
                <h6 class="margin-top-5">{{ props.money || 0 }}</h6>
              </div>
            </div>
            <div>
              <div class="margin-bottom-30">
                <div class="margin-bottom-6">支付方式：</div>
                <div class="flex align_center">
                  <div
                    class="pay_item"
                    :class="[cardChecked ? 'active' : '']"
                    @click="selCard()"
                  >
                    储值卡
                  </div>
                </div>
              </div>
              <div>
                <div
                  class="margin-bottom-6 padding-right-10 flex align-center justify-between"
                >
                  <span>自定义支付：</span>
                  <span class="fs-10">组合支付最多支持5种</span>
                </div>
                <div>
                  <template v-for="(item, index) in payItem" :key="index">
                    <div
                      class="pay_item margin-right-10"
                      :class="[item.checked ? 'active' : '']"
                      v-if="item.value != 'earnest_amount'"
                      @click="sel(item)"
                    >
                      {{ item.label }}
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </a-col>
          <a-col :md="12" :sm="12" :xs="12">
            <div>
              <div class="margin-bottom-6">收款金额(元)</div>
              <div
                class="margin-top-10"
                v-for="(item, index) in payItem"
                :key="index"
              >
                <a-input
                  :addon-before="item.label"
                  all-clear
                  placholder="请输入"
                  v-model:value="item.num"
                  v-if="item.checked"
                />
              </div>
            </div>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </ele-modal>
</template>

<script setup>
  import { ref, reactive, onMounted } from 'vue';
  import { Modal, message, Form } from 'ant-design-vue';
  import { emailReg, phoneReg, identityReg } from 'ele-admin-pro';
  import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
  import { useRouter } from 'vue-router';
  import { get_pay_type_select } from '@/api/setting/pay_type';
  import { pay } from '@/api/order/pay';

  const { currentRoute, push } = useRouter();

  // 表格列配置
  const useForm = Form.useForm;

  const props = defineProps({
    visible: Boolean,
    member_id: [Number, String],
    money: [Number, String],
    order_sn: [Number, String],
    from: String
  });

  console.log(props);

  const emit = defineEmits([
    'get_been_order',
    'done',
    'clear_been_order',
    'update:visible'
  ]);
  const loading = ref(false);
  const cardChecked = ref(false);
  const payItem = ref([
    /* { label: '现金', value: 'cash', num: null, checked: false },
    { label: '微信', value: 'wechat', num: null, checked: false },
    { label: '支付宝', value: 'alipay', num: null, checked: false },
    { label: '刷卡', value: 'card', num: null, checked: false },
    { label: '银行转账', value: 'transfer', num: null, checked: false } */
  ]);

  const form = reactive({
    member_id: props.member_id,
    order_sn: props.order_sn,
    earnest_amount: '',
    cash: 0,
    wechat: 0,
    alipay: 0,
    card: 0,
    transfer: 0
  });

  onMounted(() => {
    get_pay_type_select().then((res) => {
      console.log('res==', res);
      res.forEach((item) => {
        item.num = null;
        item.checked = false;
      });
      payItem.value = res;
    });
  });

  const sel = (item) => {
    item.checked = !item.checked;
  };
  const selCard = () => {
    cardChecked.value = !cardChecked.value;
    if (cardChecked.value) {
      payItem.value.push({
        label: '储值卡',
        value: 'earnest_amount',
        num: null,
        checked: true
      });
      /* payItem.value.forEach((item) => {
        if (item.value == 'earnest_amount') {
          item.checked = true;
        }
      }); */
    } else {
      payItem.value.forEach((item, index) => {
        if (item.value == 'earnest_amount') {
          payItem.value.splice(index, 1);
        }
      });
    }
  };

  const save = () => {
    payItem.value.forEach((item) => {
      if (item.checked) {
        form[item.value] = item.num;
      }
    });
    console.log('props.from==', props.from);
    if (props.from == 'repair') {
      emit('done', form);
    } else {
      pay(form)
        .then((res) => {
          message.success(res.msg);
          updateVisible(false);
          if (props.from != 'sales_order') {
            emit('clear_been_order');
            push({
              path: '/order/order/jewelry_order'
            });
          }
        })
        .catch((e) => {
          message.error(e);
        });
    }
  };
  const cancel = () => {
    updateVisible(true);
    Modal.confirm({
      title: '提示',
      content: '返回将中断单据操作，该单据将暂存到销售单据，确定要中断操作吗？',
      maskClosable: false,
      onOk: () => {
        emit('clear_been_order');
        updateVisible(false);
      }
    });
  };
  /* 更新visible */
  const updateVisible = (value) => {
    emit('update:visible', value);
  };
</script>
<style scoped>
  .pay_top {
    padding: 30px 0 60px;
  }
  :deep(.ant-input-group-addon) {
    min-width: 80px;
  }
</style>
